<template>
  <view class="container">
    <!-- 顶部导航栏（红色背景） -->
    <view class="top-nav">
      <text 
        class="nav-item" 
        :class="{active: currentNav === item}"
        v-for="(item, index) in navList" 
        :key="index"
        @click="currentNav = item"
      >{{ item }}</text>
    </view>

    <!-- 天气预报（橙色背景） -->
    <view class="weather-box">
      <view class="weather-header">
        <text class="weather-temp">{{ currentWeather.temp }} {{ currentWeather.condition }}</text>
        <text class="weather-time">{{ currentTime }}</text>
      </view>
      <text class="weather-title">天气预报</text>
      <text class="weather-info">
        {{ forecast.date }}（{{ forecast.week }}）最高高温 {{ forecast.max_temp }} 最低低温 {{ forecast.min_temp }}
      </text>
    </view>

    <!-- 搜索栏 -->
    <view class="search-box" @click="focusSearch">
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="搜索关键词"
        @input="filterNews"
      />
    </view>

    <!-- 更新提示栏 -->
    <view class="update-tip" v-if="showUpdateTip">
      为您更新了{{ updateCount }}条内容
    </view>

    <!-- 新闻列表 -->
    <scroll-view 
      class="news-scroll" 
      @scrolltolower="loadMoreNews"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      refresher-enabled
      refresher-triggered="isRefreshing"
    >
      <view class="news-list">
        <!-- 动态渲染新闻 -->
        <!-- 只在这一行添加了 @click 事件 -->
        <cardViewText 
          v-for="(item, index) in filteredNews" 
          :key="index"
          :title="item.title"
          :isTop="item.isTop"
          :isAd="item.isAd"
          :author="item.author"
          :comments="item.comments"
          :time="item.time"
          :imgSrc="item.imgSrc"
          :tags="item.tags"
          :hasSearch="item.hasSearch"
          @click="navigateToDetail(item)"
        >
          <template v-slot:tips v-if="item.hasSearch">
            搜索：<text class="tag">{{ item.searchTag }}</text>
          </template>
        </cardViewText>
      </view>

      <!-- 加载中提示 -->
      <view class="loading-tip" v-if="isLoading">加载中...</view>
    </scroll-view>
  </view>
</template>

<script>
import cardViewText from '@/components/cardViewText.vue';
export default {
  components: { cardViewText },
  data() {
    return {
      // 顶部导航
      navList: ['要闻', '推荐', '关注流', '24小时', '娱乐', '泉州', '财经'],
      currentNav: '要闻',
      
      // 天气数据
      currentWeather: { temp: '12.2℃', condition: '晴', city: '桂林' },
      forecast: { date: '27', week: '星期四', max_temp: '23℃', min_temp: '14℃' },
      currentTime: '10:57',
      
      // 搜索相关
      searchKey: '',
      filteredNews: [],
      
      // 新闻数据
      allNews: [],
      page: 1,
      pageSize: 5,
      
      // 状态控制
      isLoading: false,
      isRefreshing: false,
      showUpdateTip: false,
      updateCount: 0
    };
  },
  onLoad() {
    this.loadNews();
    this.initWeather();
  },
  methods: {
    // 初始化天气
    initWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          if (res.data.status === 200) {
            const data = res.data.data;
            this.currentWeather = {
              temp: data.wendu + '℃',
              condition: data.forecast[0].type,
              city: res.data.city
            };
            this.forecast = {
              date: data.forecast[1].date,
              week: data.forecast[1].week,
              max_temp: data.forecast[1].high,
              min_temp: data.forecast[1].low
            };
            this.currentTime = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' });
          }
        }
      });
    },

    // 加载新闻
    loadNews() {
      this.isLoading = true;
      const mockNews = [
        {
          title: '2025，我们温暖的记忆',
          isTop: true,
          author: '新闻网',
          comments: 4056,
          time: '2025. 新春',
          imgSrc: ''
        },
        {
          title: '中央批准：赵承任辽宁省委常委',
          isTop: false,
          author: '光明网',
          comments: 2344,
          time: '3小时前',
          imgSrc: ''
        },
        {
          title: '习近平主席贺信为全球能源市场注入更多确定性',
          isTop: false,
          author: '大河网',
          comments: 38,
          time: '3小时前',
          imgSrc: '/static/xinwen1.png'
        },
        {
          title: '中国老年化水平加速，论养老险在中国的重要性？人们应不应该买保险？',
          isTop: false,
          author: '新京报微读',
          comments: 58,
          time: '3小时前',
          imgSrc: '/static/xinwen2.png'
        },
        {
          title: '加微信交友群，喜欢就聊，找喜欢的人',
          isAd: true,
          author: '我主良缘文化',
          comments: 0,
          time: '2025.10.08 09:50',
          imgSrc: '',
          tags: ['广告']
        }
      ];
      this.allNews = mockNews;
      this.filteredNews = mockNews;
      this.isLoading = false;
    },

    // 搜索过滤
    filterNews() {
      if (!this.searchKey) {
        this.filteredNews = this.allNews;
        return;
      }
      this.filteredNews = this.allNews.filter(item => item.title.includes(this.searchKey));
    },

    // 下拉刷新
    onRefresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    },

    loadMoreNews() {},
    focusSearch() {},

    // 新增的方法：跳转到新闻详情页
    navigateToDetail(newsItem) {
      // 使用 uni.navigateTo 进行跳转
      // 你可以把新闻的标题作为参数传递过去
      uni.navigateTo({
        url: `/pages/newsDetail/newsDetail?title=${encodeURIComponent(newsItem.title)}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 0;
  background: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  overflow-x: auto;
  background: #ff0000;
  color: #fff;
}
.nav-item {
  padding: 10rpx 15rpx;
  font-size: 28rpx;
  white-space: nowrap;
  margin: 0;
}
.nav-item.active {
  background: #e00000;
}

/* 天气预报 */
.weather-box {
  padding: 15rpx;
  background: #ff5722;
  color: #fff;
  margin-bottom: 10rpx;
}
.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

/* 搜索栏 */
.search-box {
  background: #fff;
  padding: 10rpx 15rpx;
  margin: 0 15rpx 10rpx;
  border-radius: 8rpx;
}

/* 新闻列表 */
.news-scroll {
  height: calc(100vh - 280rpx); /* 适配移除TabBar后的高度 */
  padding: 0 15rpx;
}
.news-list {
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
}

/* 加载中提示 */
.loading-tip {
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style>